<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
	<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
	<meta charset="utf-8">
	<title>ChinaZ</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="css/zerogrid.css">
	<link rel="stylesheet" href="css/menu.css">
	<link rel="stylesheet" href="css/flexslider.css" type="text/css"
		  media="screen" />
	<!-- Custom Fonts -->
	<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet"
		  type="text/css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/page.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">

	<!--[if lt IE 8]>
	<div style=' clear: both; text-align:center; position: relative;'>
		<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
			<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
		</a>
	</div>
	<![endif]-->
	<!--[if lt IE 9]>
	<script src="js/html5.js"></script>
	<script src="js/css3-mediaqueries.js"></script>
	<![endif]-->

</head>
<body>
<div class="wrap-body">
	<!--////////////////////////////////////Header-->
	<header class="home-header">
		<div class="zerogrid">
			<div class="logo"><div><img src="images/foodLogo.jpg" /></div></div>
			<div class="logo-title">智能点餐系统</div>
		</div>
	</header>
	<!--//////////////////////////////////////Menu-->
	<a href="#" class="nav-toggle">Toggle Navigation</a>
	<nav class="cmn-tile-nav">
		<ul class="clearfix">
			<li class="colour-1"><a href="index.jsp">首页</a></li>
			<li class="colour-2"><a href="gallery.jsp">下午茶</a></li>
			<li class="colour-7"><a href="staff.jsp">鲜果购</a></li>
			<li class="colour-5"><a href="reservation.jsp">精选小吃</a></li>
			<li class="colour-4"><a href="archive.jsp">超市</a></li>
			<li class="colour-6"><a href="news.jsp">精选介绍</a></li>
			<li class="colour-8"><a href="menu.jsp">购物车</a></li>
			<li class="colour-7"><a href="login.jsp">登录</a></li>
			<li class="colour-2"><a href="manager.jsp">用户管理</a></li>
			<li class="colour-1"><a href="order.jsp">查看订单</a></li>
		</ul>
	</nav>

	<!--////////////////////////////////////Container-->
	<section id="container" class="sub-page">
		<div class="wrap-container zerogrid">
			<div class="crumbs">
				<ul>
					<li><a href="index.jsp">首页</a></li>
					<li><a href="javascript:viod(0)">用户管理</a></li>
				</ul>
			</div>
			<div class="btn-toolbar">
				<div class="search">
					<div class="clearfix"></div>
					<div class="search d1">
						<form style="margin-left:50px">
							<input type="text" id="content" placeholder="搜索用户" name="content">
							<button type="button" id="search"></button>
						</form>
					</div>
				</div>
				<div class="btn-group"></div>
			</div>
			<div id="main-content" style="margin-top:10px">
				<div class="wrap-content">
					<div class="panel panel-default">
						<!-- Default panel contents -->
						<div class="panel-heading">用户列表</div>
						<table class="table">
							<thead>
							<tr>
								<th>序列</th>
								<th>用户姓名</th>
								<th>用户昵称</th>
								<th>联系电话</th>
								<th>收货地址</th>
								<th>操作</th>
							</tr>
							</thead>
							<tbody id="article-wrap">
							<!-- <div class="Article-wrap" id="article-wrap"></div> -->
							</tbody>
						</table>
					</div>
					<div class="pages" id="pager"></div>
				</div>
			</div>
		</div>
	</section>
	<footer class="zerogrid">
		<div class="wrap-footer">
			<div class="row">
				<div class="col-1-3">
					<div class="wrap-col">
					</div>
				</div>
				<div class="col-1-3">
					<div class="wrap-col">
						<h4>联系客服</h4>
						<p>0594-1234567</p>
						<p>周一至周日 9:00-23:00</p>
						<p>客服不受理商务合作</p>
					</div>
				</div>
			</div>
		</div>
		<div class="copyright">
			<div class="wrapper">
				<a target="_blank" href="#"></a>
				<ul class="quick-link f-right">
				</ul>
			</div>
		</div>
	</footer>
</div>
<!-- 修改用户弹窗 -->
<div class="modal fade" id="modifyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
						aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="modifyModalLabel">修改用户信息</h4>
			</div>
			<div class="modal-body">
				<form>
					<div class="form-group">
						<label for="modify-recipient-name" class="control-label">用户名称:</label>
						<input type="text" class="form-control" id="modify-recipient-name" value="高哥哥">
					</div>
					<div class="form-group">
						<label for="modify-nickName" class="control-label">用户昵称:</label>
						<input type="text" class="form-control" id="modify-nickName" value="高哥哥">
					</div>
					<div class="form-group">
						<label for="modify-mobile" class="control-label">联系电话:</label>
						<input type="text" class="form-control" id="modify-mobile" value="1332820222">
					</div>
					<div class="form-group">
						<label for="modify-address" class="control-label">收货地址:</label>
						<input type="text" class="form-control" id="modify-address" value="广东省广州市">
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-primary" id="modifySubmit">确定</button>
			</div>
		</div>
	</div>
</div>
<!-- 删除用户弹窗 -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
	<div class="modal-dialog modal-sm" role="document">
		<div class="modal-content">
			<div class="modal-body">确定删除该用户？</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
				<button type="button" class="btn btn-primary" id="deleteSubmit">确定</button>
			</div>
		</div>
	</div>
</div>
</body>
<script src="js/bootstrap.min.js"></script>
<script>
    // 修改用户信息确定
    $("#modifySubmit").click(function () {
        $("#modifyModal").modal('hide')
    })
    // 删除用户信息
    $("#deleteSubmit").click(function () {
        $(".bs-example-modal-sm").modal('hide')
    })
    //实现分页
    var currentPage = 1; // 当前页码, 从1开始
    var pageSize = 5; // 每页显示记录数
    var maxButtons = 10; // 显示的分页按钮数量
    var totalNumber = 30; // 记录总数
    var totalPage = parseInt(Math.ceil(totalNumber/pageSize)); // 总页数
    initPage();

    function initPage() {
        //循环生成数组
        var arr = [];
        for(var o = 1; o <=totalNumber; o++) {
            arr.push('<tr><th>'+o+'</th><th>13328202442</th><th>高哥哥</th><th>13328202442</th><th>广东省广州市</th><th><button type="button" class="btn btn-success" data-toggle="modal" data-target="#modifyModal" data-whatever="@mdo" style="margin-left: 50px;">修改</button><button type="button" class="btn btn-danger delete" data-toggle="modal" data-target=".bs-example-modal-sm">删除</button></th></tr>');
        }
        //每一页第一个li
        var rangeStartitem = (currentPage - 1) * pageSize;
        //开始页
        var rangeStart = Math.max(1, currentPage - parseInt(maxButtons / 2));
        //最后一页
        var rangeEnd = Math.min(totalPage, rangeStart + maxButtons - 1);

        var constr = pageCon(arr, rangeStartitem, pageSize);

        var divcontent = document.getElementById("article-wrap");
        divcontent.innerHTML = constr;

        //创建分页模板
        var str = "";
        str += "<div class='pagination'>";
        //如果总页数大于1
        if(totalPage > 1) {
            //当前页不是第一页
            if(currentPage != 1) {
                str += '<a href="#!"  data-num="1"><span>首页</span></a>';
                str += '<a href="#!"  data-num="' + (currentPage - 1) + '"><span>上一页</span></a>';
            } else {
                //如果是第一页，禁用上一页按钮
                str += '<span>首页</span>';
                str += '<span>上一页</span>';
            }
            //中间页码
            for(var i = rangeStart; i <= rangeEnd; i++) {
                //如果是当前页的话，就禁用当前页的按钮
                if(i == currentPage) {
                    str += '<span class="on">' + i + "</span>";
                } else {
                    //否则就可以点击该页
                    str += '<a href="#"  data-num="' + i + '"><span>' + i + "</span></a>";
                }
            }
            //当前页不是总页，即是最后一页
            if(currentPage != totalPage) {
                str += '<a href="#"  data-num="' + (parseInt(currentPage) + 1) + '"><span>下一页</span></a>';
                str += '<a href="#"  data-num="' + totalPage + '"><span>末页</span></a>';
            } else {
                //如果是最后页，禁用下一页
                str += '<span>下一页</span>';
                str += '<span>末页</span>';
            }
        }

        str += ' 一共' + totalPage + '页, ' + totalNumber + '条记录 </div>';

        var divpager = document.getElementById("pager");
        divpager.innerHTML = str;
        //获取所有生成的页面链接
        var listTag = divpager.getElementsByTagName('a');
        //绑定li事件
        for(var i = 0; i < listTag.length; i++) {
            listTag[i].onclick = function() {
                var currentPage = this.getAttribute('data-num');
                nowcurrentPage(currentPage);
                return false;
            };
        }
    }
    //传递页面
    function nowcurrentPage(currentPage) {
        this.currentPage = currentPage;
        initPage();
    }

    //生成每页的数据
    function pageCon(arr, rangeStartitem, len) {
        var constr = '';
        for(var i = rangeStartitem; i < rangeStartitem + len; i++) {
            constr += arr[i];
        }
        return constr;
    }
</script>
<style type="text/css">
	#nav {
		height: 40px;
		background-color: #efeff0;
		margin-left: -16px;
		margin-right: -16px;
	}

	#nav ul {
		list-style: none;
	}

	#nav li {
		display: inline;
		line-height: 40px;
		color: #000;
	}

	#nav a {
		color: #000;
		text-decoration: none;
		padding: 20px 20px;
	}

</style>

</html>